<template>
  <div class="module_container">
    <div class="module_title" flex="main:justify">
      <div class="title_text">奖励兑换情况统计</div>
      <div class="title_tab" flex>
        <div class="active">今日数据</div>
        <div style="margin-left: -20px">累计数据</div>
      </div>
    </div>
    <div class="content" flex="cross:center">
      <div class="left">
        <div class="l_circle" flex="cross:center main:center">
          <dv-active-ring-chart :config="config" style="width: 300px; height: 300px" />
          <p class="text">今日奖励兑换金额</p>
        </div>
        <!-- <img src="@/assets/img_xinyong/module2/data_circle_bg.png" alt="" srcset=""> -->
      </div>
      <div class="right flex_1">
        <div v-for="(item,index) in config.data" :key="index" flex="main:justify cross:center" style="margin-top:30px">
          <span style="width: 152px">{{ item.name }}</span>
          <!-- <el-progress :percentage="50" /> -->
          <div class="progress flex_1 " style="height:40px;padding-top:15px">
            <div style="height:15px;" :style="`background:${[
              '#37a2da',
              '#ffdb5c',
              '#32c5e9',
              '#67e0e3'][index]};width:${item.value*100/total}%`" />
            <!-- <el-progress :show-text="false"
                         :status="['success', 'warning', 'exception'][i - 1]"
                         :text-inside="true"
                         :percentage="100"

            /> -->
          </div>
          <b style="width: 78px; font-size: 36px" class="margin_left_20">{{ item.value }}</b>
        </div>
      </div>
    </div>
    <!-- <div class="c_bottom">
      <div ref="line" class="flex_1" style="height:150px;" />
    </div> -->
  </div>

  <!-- <flux /> -->
  <!-- <revenueLine /> -->
</template>

<script>
// import CountTo from 'vue-count-to'
// import Charts from '@jiaminghi/charts'
// import { optionLine } from './module2_option'
// import fhIndustryList from '@/api/fh/fhIndustryList'
export default {
  components: {
    // CountTo
  },
  data() {
    return {
      totalObj: {
        company: 0,
        income: 0,
        revenue: 0
      },
      currYear: new Date().getFullYear() - 1,
      isYear: false,
      currMonth: new Date().getMonth() + 1,
      config: {
        data: [
          {
            name: '停车免费券',
            value: 0
          },

          {
            name: '停车优惠券',
            value: 1680
          },
          {
            name: '网易严选券',
            value: 600
          }
        ],
        lineWidth: 10
      }
    }
  },
  computed: {
    years() {
      const firstYear = new Date().getFullYear() - 2
      return Array.from({ length: 5 }).map((e, i) => i + firstYear)
    },
    months() {
      return Array.from({ length: 12 }).map((e, i) => i + 1 + '月')
    },
    total() {
      return this.config.data.reduce((prev, curr) => {
        return curr.value + prev
      }, 0)
    }
  },
  mounted() {
    // fhIndustryList.list().then(res => {
    //   res.content.forEach((item, index) => {
    //     optionBar.xAxis.data[index] = item.name
    //     optionBar.series[0].data[index] = item.companyCount
    //     optionPie.series[0].data[index] = { name: item.name, value: item.companyCount }
    //     this.totalObj.company += item.companyCount
    //     this.totalObj.income += item.totalIncome
    //     this.totalObj.revenue += item.totalRevenue
    //   })
    //   this.$nextTick(() => {
    //     new Charts(this.$refs.bar).setOption(optionBar)
    //     new Charts(this.$refs.pie).setOption(optionPie)
    //     this.handleYearCommand(new Date().getFullYear())
    //     // new Charts(this.$refs.line).setOption(optionLine)
    //   })
    // })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.content {
  padding: 25px 40px 55px 40px;
  font-size: 28px;
  .l_circle {
    background: url("~@/assets/img_xinyong/module2/data_circle_bg.png")
      no-repeat;
    background-size: cover;
    height: 280px;
    width: 280px;
    position: relative;
    .text {
      position: absolute;
      bottom: -50px;
      text-align: center;
      width: 100%;
    }
    // padding-bottom: 20px;
  }
  .progress {
    background: url("~@/assets/img_xinyong/module2/progress_bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 12px;
    width: 250px;
    height: 28px;
    box-sizing: border-box;
    ::v-deep .el-progress-bar__outer {
      background-color: transparent;
    }
    ::v-deep .el-progress.is-success .el-progress-bar__inner {
      background-image: linear-gradient(90deg, #30b3ff 0%, #1f75ff 96%);
    }
    ::v-deep .el-progress.is-danger .el-progress-bar__inner {
      background-image: linear-gradient(-51deg, #0fff5a 2%, #48fce4 76%);
    }
    ::v-deep .el-progress.is-warning .el-progress-bar__inner {
      background-image: linear-gradient(81deg, #f959cf 1%, #8815f9 100%);
    }
    ::v-deep .el-progress.is-warning .el-progress-bar__inner {
      background-image: linear-gradient(81deg, #f959cf 1%, #8815f9 100%);
    }
  }
}
</style>
